<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一节课</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			canvas {
				width: 400px;
				height: 400px;
				border: 2px solid blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="400" height="400"></canvas>
		</div>
	</body>
	<script>
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			
			console.dir(oCanvas);
			
			let oPen = oCanvas.getContext("2d");
			//四边形
			oPen.moveTo(3,3);
			oPen.lineTo(150,3);
			oPen.lineTo(150,150);
			oPen.lineTo(3,150);
			oPen.lineTo(3,3);
			//三角形
			/*oPen.strokeStyle="palegreen"
			oPen.moveTo(225,3);
			oPen.lineTo(150,150);
			oPen.lineTo(300,150);
			oPen.lineTo(225,3);*/
			//三角形
			//oPen.moveTo(5,160);
			//oPen.lineTo(5,290);
			//oPen.lineTo(290,290);
			//oPen.lineTo(290,290);
			//oPen.lineTo(5,160);
			//渲染
			//oPen.stroke();
			oPen.strokeStyle="red"
			//距离画布左边的位置，距离画布顶部的位置，宽度，高度
			oPen.strokeRect(25,20,100,50);
			//oPen.strokeRect(25,225,100,50);
			oPen.fillStyle="aqua";
			oPen.fillRect(25,20,100,50);
			//oPen.fillStyle="green";
			//oPen.fillRect(25,225,100,50);
			//oPen.strokeRect(200,150,180,100);
			//oPen.fillStyle="yellow";
			//oPen.fillRect(200,150,180,100);
			
			//oPen.moveTo(300,3);
			//oPen.lineTo(300,300);
			//oPen.lineWidth="10";
			oPen.stroke();
			
			//清除
			//oPen.clearRect(160,150,150,160);
			
	</script>
</html>
